<template>
  <div id="wrap">
    <v-goTop></v-goTop>


    <!--头部-->
    <div class="top">
      <img @click="goback()" src="../../../static/bmqd/BMQD-1.png" alt="">
      <span>{{title}}</span>
      <img src="../../../static/bmqd/fenxiang.png" alt="">
    </div>

    <img class="con-img" src="../../../static/tuijian/tj-3.png" />
    <div class="con-title">
      <p></p>
    </div>
    <div class="con-wrap">
      <p :class="{'pp':active==index}" v-for="(l,index) in list" @click="change(index)">{{l.t}}</p>
    </div>

    <div class="lists" v-for="i in tits">
      <!--标题-->
      <div class="list-tit">
        <img :src="i.url">
        <p>{{i.tit}}</p>
        <img :src="i.url">
      </div>

      <!--商品描述-->
      <div class="goods-info">
        <div class="goods-list" v-for="item in i.info">
          <div class="info-top">
            <img :src="item.url1" alt="">
          </div>
          <div class="info-bot">
            <h3>{{item.text}}</h3>
            <span>{{item.price}}</span>
            <button class="btn1" @click="buy()">立即购买</button>
          </div>
        </div>
      </div>
    </div>




  </div>
</template>

<script>
  import Scrolltop from './Scrolltop'
    export default {
        name: "Yanzhuang",
      data(){
        return{
          title:'炫丽眼妆',
          active:0,
          list:[
            {t:'防晒必备'},
            {t:'随身面膜'},
            {t:'分装瓶'},
            {t:'化妆水'}
          ],
          tits:[
            {tit:'防晒必备',url:require('../../../static/xlyz/xing.png'),
              info:[
                {url1:require('../../../static/xlyz/jml.png'),text:'蜗牛饰容BB霜50g',price:'¥12.90'},
                {url1:require('../../../static/xlyz/jml.png'),text:'蜗牛饰容BB霜50g',price:'¥12.90'},
                {url1:require('../../../static/xlyz/jml.png'),text:'蜗牛饰容BB霜50g',price:'¥12.90'},
                {url1:require('../../../static/xlyz/jml.png'),text:'蜗牛饰容BB霜50g',price:'¥12.90'}
              ]
            },
            {tit:'随身面膜',url:require('../../../static/xlyz/xing.png'),
              info:[
                {url1:require('../../../static/xlyz/jml.png'),text:'蜗牛饰容BB霜50g',price:'¥12.90'},
                {url1:require('../../../static/xlyz/jml.png'),text:'蜗牛饰容BB霜50g',price:'¥12.90'},
                {url1:require('../../../static/xlyz/jml.png'),text:'蜗牛饰容BB霜50g',price:'¥12.90'},
                {url1:require('../../../static/xlyz/jml.png'),text:'蜗牛饰容BB霜50g',price:'¥12.90'}
              ]
            },
            {tit:'分装瓶',url:require('../../../static/xlyz/xing.png'),
              info:[
                {url1:require('../../../static/xlyz/jml.png'),text:'蜗牛饰容BB霜50g',price:'¥12.90'},
                {url1:require('../../../static/xlyz/jml.png'),text:'蜗牛饰容BB霜50g',price:'¥12.90'},
                {url1:require('../../../static/xlyz/jml.png'),text:'蜗牛饰容BB霜50g',price:'¥12.90'},
                {url1:require('../../../static/xlyz/jml.png'),text:'蜗牛饰容BB霜50g',price:'¥12.90'}
              ]
            }
          ],
        }
      },
      methods:{
          change(i){
            this.active=i;
          },
          buy(){

          },
          goback(){
            window.history.go(-1);
          }
      },
      components:{
        'v-goTop':Scrolltop
      }
    }
</script>

<style scoped>
  #wrap{
    background: #f2f2f2;
    position: relative;
  }
  .top{
    width: 69rem;
    height: 3rem;
    line-height: 3rem;
    padding: 3.5rem 1.5rem;
    background: #e53e42;
    display: flex;
    justify-content: space-between;
  }
  .top span{
    font-size: 3.6rem;
    color: #fff;
  }
  .top img{
    width: 3rem;
    height: 3rem;
  }


  .con-img{
    width: 72rem;
    height: 30rem;
  }
  .con-wrap{
    display: flex;
    justify-content: space-between;
    padding: 0 3rem;
    background: #fff;
    border-bottom:.1rem solid #ccc ;
  }
  .con-wrap p{
    position: relative;
    display: inline-block;
    width: 12rem;
    height: 6rem;
    line-height: 6rem;
    color: #4d4d4d;
    font-size: 3rem;
    text-align: center;


  }
  .con-wrap p:after{
    position: absolute;
    left: -3rem;
    top:1.5rem;
    content: '';
    height: 3rem;
    width: .2rem;
    background: #808080;
  }
  .con-wrap p:first-child:after{
    display: none;
  }
  .con-wrap .pp{
    color: #e53e42;
    border-bottom: .2rem solid #e53e42;
  }

  .lists{
    width: 68rem;
    padding: 0 2rem ;
  }
  .list-tit{
    width: 100%;
    height: 3rem;
    padding: 2.5rem 0;
    display: flex;
    justify-content: space-between;

    /*padding-bottom: 2.5rem;*/
  }
  .list-tit img{
    width: 26rem;
    height: 3rem;
  }
  .list-tit p{
    font-size: 3rem;
    color: #4d4d4d;
    height: 3rem;
    line-height: 3rem;
  }


  .goods-info{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .goods-list{
    width: 33rem;
    height: 44rem;
    border: 1px solid #cccccc;
    background: #fff;
    margin-bottom: 2rem;
  }
  .info-top{
    width: 7rem;
    height: 16rem;
    padding:5rem 13rem;
    border-bottom: 1px solid #cccccc;
  }
  .info-top img{
    width: 7rem;
    height: 16rem;
  }
  .info-bot{
    padding: 1rem 2rem 1rem;
    text-align: center;
  }
  .info-bot h3{
    font-size: 2.2rem;
    color: #4d4d4d;
    margin-top: 1rem;
  }
  .info-bot span{
    display: block;
    color: #e53e42;
    font-size: 2.4rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
  }
  .info-bot .btn1 {
    width: 22rem;
    height: 3.5rem;
    border-radius: 1.5rem;
    background:#e53e42;
    color: #fff;
    font-size: 2.4rem;
  }
</style>
